<template>
  <view v-if="shenheStatus == 0" :class="['page', classname]">
    <template v-if="data">
      <image :src="data.bg_image" class="bg-img" mode="aspectFill"></image>
      <view
        class="nav"
        :style="{
          paddingTop: statusBarHeight + 'px',
          background: `rgba(255,255,255,${opacity})`
        }"
      >
        <view class="nav-head"> 用户注册 </view>
      </view>

      <view class="module">
        <toolsForm
          ref="form"
          :form="getData"
          @fileCallback="fileCallback"
          @changeMobile="changeMobile"
          :disabled="disabled"
        ></toolsForm>
      </view>

      <view class="foot">
        <text :class="['btn', { disabled: disabled }]" @click="submit">{{
          disabled ? "正在审核" : "提交审核"
        }}</text>
        <view class="tip">
          <!-- <checkbox
            :checked="read"
            color="#f0250e"
            @click="handle('click')"
            style="transform: scale(0.7)"
          /> -->
          <u-checkbox
            v-model="read"
            shape="circle"
            active-color="#f0250e"
          ></u-checkbox>

          <text>我已经阅读并同意</text>
          <text @click="show = true" style="color: #f0250e">《用户协议》</text>
        </view>
      </view>

      <u-modal
        v-model="show"
        :content="data.protocol"
        title="用户协议"
      ></u-modal>
    </template>
    <transitionPage v-else></transitionPage>
  </view>
  <Shenhe v-else-if="shenheStatus == 1" :isShowTitle="true"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import toolsForm from "./components/tools-form.vue";
import { userAudit, setUserAudit } from "./api";
import { regMobile } from "@/common/regExp";
export default {
  components: {
    Shenhe,
    toolsForm
  },
  data() {
    return {
      opacity: 0,
      data: null,
      read: false,
      show: false,
      disabled: false,
      open_params: {},
      classname: ""
    };
  },

  onLoad() {
    this.userAudit();
  },

  methods: {
    async userAudit() {
      const r = await uni.login({})
      let code = '';

      try{
        code = r[1].code
      }catch(e){}
      
      const res = await userAudit({
        code
      });
      if (!res.code) {
        this.data = res.data;
        let { status, pass_remark, token } = res.data;

        if (status == 1) {
          if (token) {
            this.$utils.setStorage("token", token);
            this.$utils.toUrl(`/pages/home/home`, "switchtab");
          } else {
            this.$utils.showModal(
              "提示",
              "审核已通过，需要先注册",
              false,
              () => {
                this.$utils.toUrl(`/login/login/login_page`);
              }
            );
          }
        } else if (status == 2) {
          this.$utils.showModal("提示", pass_remark, false, () => {});
        } else if (status == 0) {
          this.disabled = true;
        }
      }
    },

    submit() {
      this.$u.throttle(async () => {
        try {
          if (this.disabled) return;
          if (!this.read) return this.$utils.toast("请同意用户协议");
          const { mobile } = this.data;
          if (mobile && !regMobile(mobile))
            return this.$utils.toast("请填写正确消息通知手机号");
          const el = this.$refs.form.newForm;
          const { list: custom_form } = el;
          custom_form.forEach((item) => {
            if (item.required == 1 && item.default.length == 0) {
              throw item.tip;
            }
          });

          const res = await setUserAudit(
            {
              avatar: this.data.avatar,
              mobile,
              custom_form,
              ...this.data.open_params
            },
            true
          );
          if (!res.code) {
            this.$utils.toUrl("/other/register/result?status=3", "redirectTo");
          }
        } catch (error) {
          this.$utils.toast(error);
        }
      }, 1000);
    },

    fileCallback(e) {
      this.$nextTick(() => {
        this.data.avatar = e;
      });
    },

    changeMobile(e) {
      this.data.mobile = e;
    }
  },
  computed: {
    getData() {
      if (!this.data) return null;
      return {
        list: this.data.custom_form,
        form_name: this.data.form_name,
        avatar: this.data.avatar,
        mobile: this.data.mobile
      };
    }
  },
  onPageScroll({ scrollTop }) {
    if (scrollTop >= 0 && scrollTop <= 100) {
      this.opacity = scrollTop / 100;
    }

    if (scrollTop > 0) {
      if (!this.classname) {
        this.classname = "on";
      }
    } else {
      if (this.classname) {
        this.classname = "";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9;
  padding: 0 32rpx;
  transition: 0.3s all;

  .nav-head {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    font-size: 36rpx;
    color: #fff;
  }
}

.page {
  min-height: 100vh;
  background: #f2f2f2;
  padding-bottom: 300rpx;

  &.on {
    .nav-head {
      color: #000;
    }
  }
}

.bg-img {
  height: 580rpx;
  width: 100%;
}

.module {
  position: relative;
  z-index: 2;
  background: #fff;
  margin: -172rpx 24rpx 0;
  padding: 0 24rpx;
  border-radius: 20rpx;

  .title {
  }
}

.foot {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #ffffff;
  width: 100%;
  padding-top: 20rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom));
  padding-bottom: calc(env(safe-area-inset-bottom));
  border-top: 1px solid #eee;
  .btn {
    width: 678rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    background-color: #f0250e;
    font-size: 32rpx;
    color: #fff;
    font-weight: 500;
    border-radius: 999rpx;

    &.disabled {
      opacity: 0.5;
    }
  }
  .tip {
    margin: 20rpx 0;
    font-size: 24rpx;
    color: #8c8c8c;
  }
}
</style>
